<html>
<head>
	<style>
	table {
		border-width: 1px;
		border-style: solid;
		border-color: #600;
  }
  td {
		border-width: 1px;
		border-style: solid;
		border-color: #600;
    vertical-align:center
  }
	th {
		border-width: 1px;
		border-style: solid;
		border-color: #600;
	}
  .name {
    width:100px;
    color:white;
    padding-left:3px
  }
  .status {
    padding-left:2px;
    color:#353C91
  }
  #bakerloo { background-color: #AE6118}
  #central { background-color: #E41F1F}
  #circle { background-color: #F8D42D; color:#353C91}
  #district { background-color: #00A575}
  #hammersmithandcity { background-color: #E899A8; color:#353C91}
  #jubilee { background-color: #8F989E}
  #metropolitan { background-color: #893267}
  #northern { background-color: #000000}
  #piccadilly { background-color: #0450A1}
  #victoria { background-color: #009FE0}
  #waterlooandcity { background-color: #70C3CE; color:#353C91}
  #dlr { background-color: #00BBB4; }
  #overground { background-color: #F86C00;}
  </style>
	<title>London Underground Current Status</title>
</head>
<body>
	<h1>London Underground Current Status</h1>
	<p>Last Update: {{update}}</p>
	<table>
		<tr>
			<th>Line</th>
			<th>Status</th>
			<th>Reason</th>
		</tr>
		{% for line in cs.getLines %}
		<tr>
			<td class='name' id='{{line.name}}'>{{line.name}}</td>
			<td class='status'>{{line.getStatus}}</td>
			<td>{{line.description}}</td>
		</tr>
		{% endfor %}
	</table>
	{% include 'google_analytics_tracker.js' %}
</body>
</html>